import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Button, Dropdown, Menu } from '@teamix/ui';
import { YunxiaoIcon, Header, Body, BodyContent, Content } from '@alife/devops-ui';
import { Link, navigate } from 'utils/router';
import ProjectPathToolbar from 'components/projectPathToolbar';
import { enterPage } from 'utils/track';
import CommitInfoMedia from 'components/commitInfoMedia';
import FilePanel from 'components/filePanel';
import Highlighter from 'components/highlighter';
import utils from 'utils';
import * as actions from '../actions/index';
import intl from '../../../../../../../locale';

const { pathResource, resourceSubject } = window.FORCE;

class Root extends Component {
  static propTypes = {};

  static defaultProps = {};

  componentDidMount() {
    this.props.getBlame();
    this.props.getLastCommit();

    enterPage('Repo-Blame');
  }

  onBranchAndTagSelectChange = (revision) => {
    navigate(
      `/${pathResource.fullPath}/blame/${utils.revisionEncodeURI(revision)}/${
        resourceSubject.path
      }`,
      {
        state: { forceUpdate: true },
      },
    );
  };

  render() {
    const { blames, lastCommit } = this.props;
    const resourcePathArr = resourceSubject.path.split('/');
    const fileName = resourcePathArr[resourcePathArr.length - 1];

    return (
      <>
        <Header
          title={
            <div className="blame-title">
              <Button
                text
                component="a"
                onClick={() => {
                  navigate(
                    `/${pathResource.fullPath}/blob/${utils.revisionEncodeURI(
                      resourceSubject.revision,
                    )}/${resourceSubject.path}`,
                  );
                }}
              >
                <YunxiaoIcon type="arrow-left-2-line" />
              </Button>
              <span style={{ verticalAlign: 'bottom' }}>Blame</span>
            </div>
          }
        />
        <Body>
          <BodyContent>
            <Content>
              <div className="card-wrapper">
                <ProjectPathToolbar
                  onBranchAndTagSelectChange={this.onBranchAndTagSelectChange}
                  isBorderTop
                  resourcePath={resourceSubject.path}
                  blameRightJsx={
                    <div className="display-type item-right">
                      <Dropdown
                        trigger={
                          <Button text>
                            <YunxiaoIcon type="more-line" />
                          </Button>
                        }
                        triggerType="click"
                      >
                        <Menu>
                          <Menu.Item>
                            <Link
                              to={`/${pathResource.fullPath}/commits/${utils.revisionEncodeURI(
                                resourceSubject.revision,
                              )}/${resourceSubject.path}`}
                            >
                              {intl.get({
                                id: 'code-assets.src.utils.locale.History',
                                defaultMessage: '历史',
                              })}
                            </Link>
                          </Menu.Item>
                          <Menu.Item>
                            <Link
                              to={`/${pathResource.fullPath}/blob/${lastCommit.id}/${resourceSubject.path}`}
                            >
                              {intl.get({
                                id: 'code-assets.src.utils.locale.FixedAddress',
                                defaultMessage: '固定地址',
                              })}
                            </Link>
                          </Menu.Item>
                        </Menu>
                      </Dropdown>
                    </div>
                  }
                />
                <FilePanel className="blame-panel">
                  <FilePanel.Header className="blame-panel-header">
                    <div className="file-name">{fileName}</div>
                  </FilePanel.Header>
                  <FilePanel.Body noPadding>
                    {blames.map((blame) => (
                      <div className="blame-item">
                        <CommitInfoMedia commitInfo={blame.commit} useForList noBuildTag />
                        <Highlighter
                          className="blame-item-right"
                          language={`${fileName.split('.')[fileName.split('.').length - 1]}`}
                          startingLineNumber={blame.start}
                        >
                          {blame.contents.join('\n')}
                        </Highlighter>
                      </div>
                    ))}
                  </FilePanel.Body>
                </FilePanel>
              </div>
            </Content>
          </BodyContent>
        </Body>
      </>
    );
  }
}

export default connect(
  (state) => state.project.projectBlame,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
